
<template>
  <div class="tabs">
    <button @click="isOpen = !isOpen">按钮</button>
    <p :class="'modal' + (isOpen ? ' open' : '')">我是文本</p>

    <!-- class 的对象绑定，属性名称/键是类名，属性值是个布尔量 -->
    <p :class="{ 'modal': true, 'open': isOpen}"></p>

    <!-- 静态的类和动态插值绑定的类名不会覆盖，会合并 -->
    <p class="modal" :class="{ 'open': isOpen}">我是文本</p>


    <!-- 样式的对象绑定，属性名是样式名称 -->
    <p :class="['modal', isOpen ? 'open' : '']" :style="{ fontSize: fontSize + 'px', 'font-weight': fontWeight, 'color': color}">我是文本</p>




    <ul class="tab-list">
      <li
        v-for="(d, i) in list"
        :key="d.title"
        :class="i === activeIndex ? 'active' : ''"
        @click="activeIndex = i"
      >
        {{ d.title }}
      </li>
    </ul>

    <div class="content" v-html="list[activeIndex].content"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 控制 p 标签的 open 那个class存在与否
      isOpen: false,
      fontSize: 30,
      fontWeight: 'bold',
      color: 'red',
      classArr: ['modal', 'open'],
      classObj: {
        modal: true,
        open: false
      },

      // 高亮/打开 tab 的下标
      activeIndex: 0,
      list: [
        {
          title: "静夜思",
          content: "<p>窗前明月光，<br/>疑是地上霜</p>",
        },
        {
          title: "春晓",
          content: "<p>春眠不觉晓，<br/>处处闻啼鸟</p>",
        },
        {
          title: "咏鹅",
          content: "<p>饿饿饿</p>",
        },
      ],
    };
  },
};
</script>

<style scoped>
.tab-list {
  display: flex;
  border: 1px solid #000;
  border-radius: 3px;
}
.tab-list li {
  list-style: none;
  flex: 1;
}
.tab-list li + li {
  border-left: 1px solid #333;
}
.tab-list li.active {
  color: #fff;
  background: #000;
}
</style>
